CSSの基本（18）−リンクの書式指定
今回はCSSを使ってリンクの書式を指定する方法を紹介します。この指定方法をマスターすれば、リンク部分の文字サイズや文字色、背景色などを自由にデザインできるようになります。さらに、マウスポインタがリンク上に来たときの書式などを指定すれば、動きのあるホームページを作成できるようになります。

→ リンクの書式を指定する
 
CSSでリンクの書式を指定する場合は、「A:link{………}」という形で書式を指定します。{………}の部分には文字色（color）、文字サイズ（font-size）など、CSSのプロパティを自由に記述できます。ただし、この書式指定は未訪問のリンクにのみ有効となることに注意してください。訪問済みのリンクの書式は、別途「A:visited{………}」で指定しなければいけません。もちろん、両者に異なる書式を指定することも可能です。
<STYLE type="text/css">
A:link{
  color:#FF9900;
  font-size:16pt;
  line-height:1.5;
}
A:visited{
  color:#FF9900;
  font-size:16pt;
  line-height:1.5;
}
</STYLE> 		サンプルページ


→ マウスオーバーなどの書式を指定する
 
“未訪問”や“訪問済み”のほかに、“リンク上にマウスポインタが来たとき”や“リンクをクリックしたとき”の書式を指定することも可能です。これらは、それぞれ「A:hover{………}」「A:active{………}」で指定します。以下のサンプルは、先ほどの例に「A:hover{………}」と「A:active{………}」を追加したものです。これで、リンク上にマウスポインタを移動させたり、リンクをクリックしたときに、文字色や背景色などを変化させることが可能となります。
<STYLE type="text/css">
A:link{
  ：
}
A:visited{
 ：
}
A:hover{
  color:#FFFFFF;
  font-size:16pt;
  line-height:1.5;
  font-weight:bold;
  background-color:#FF9900;
  padding:3px;
}
A:active{
  color:#FFFFFF;
  font-size:16pt;
  line-height:1.5;
  font-weight:bold;
  background-color:#000000;
  padding:3px;
}
</STYLE>
 サンプルページ


→ クラスで書式を分ける
 
これまでの解説では、全てのリンクが同じ書式になってしまいます。もし、リンクの種類によって書式を分けたい場合は、class属性を利用し、「A.（クラス名）:link{………}」などのようにCSSを記述します。たとえば以下のサンプルは、通常のリンクとclass="c1"のリンクについて書式（文字サイズ）を変更した例です。このように、CSSで何種類ものリンクの書式を指定することも可能です。
<STYLE type="text/css">
A:link{
  ：
}
A:visited{
  ：
}
A:hover{
  ：
}
A:active{
  ：
}
A.c1:link{font-size:24pt}
A.c1:visited{font-size:24pt}
A.c1:hover{font-size:24pt}
A.c1:active{font-size:24pt}
</STYLE>

  ：

<BODY>
  ：
<A href="http://www.infoseek.co.jp5/" class="c1">Infoseek（トップページ）</A><BR>
　---　<A href="http://news.www.infoseek.co.jp/">Infoseek（ニュース）</A><BR>
  ：
 サンプルページ


�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I


�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��